<!--
 * @Author: yehongbo 1394168736@qq.com
 * @Date: 2024-01-13 15:57:58
 * @LastEditors: yehongbo 1394168736@qq.com
 * @LastEditTime: 2024-01-17 09:29:50
 * @FilePath: \giteeDownload\vue3ant\src\App.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <nav>
    <router-link to="/">Home</router-link>
    <router-link to="/about">About</router-link>
    <router-link to="/antvG6test">antvG6test</router-link>
    <router-link to="/antvG6Try">antvG6Try</router-link>
    <router-link to="/wangEditor">wangEditor</router-link>
    <router-link to="/zixulie">zixulie</router-link>
    <router-link to="/objAddPro">objAddPro</router-link>
  </nav>
  <router-view />
</template>
<script>
// 1.获取html的元素
const htmlEl = document.documentElement;

function setRemUnit() {
  // 2.获取html的宽度(视口的宽度)
  const htmlWidth = htmlEl.clientWidth;
  // 3.根据宽度计算一个html的font-size的大小
  const htmlFontSize = htmlWidth / 10;
  // 4.将font-size设置到html上
  htmlEl.style.fontSize = htmlFontSize + "px";
}
// 保证第一次进来时, 可以设置一次font-size
// setRemUnit();

// 当屏幕尺寸发生变化时, 实时来修改html的font-size
// window.addEventListener("resize", setRemUnit);

// 监听页面初次加载时候的事件
// window.addEventListener("pageshow", setRemUnit);
</script>
<style lang="scss">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

nav {
  padding: 30px;

  a {
    font-weight: bold;
    color: #2c3e50;

    &.router-link-exact-active {
      color: #42b983;
    }
  }
}
</style>
